<template>
	<div style="padding-top:50px;">
    <topHeader>
      <div slot="left">
        <img src="./../../assets/img/return.png" alt="" @click="goMine">
      </div>
      <span slot="center">
        修改手机
      </span>
    </topHeader>
    <div class="update_tel_box">
      <div class="updatepassword_box">
          <input type="tel" id="phone" placeholder="请输入您的手机号" value="" v-model='userInfo.phone' disabled/>
      </div>
      <!-- <div class="index_divide"></div>
      <div class="updatepassword_idetity_box">
          <input type="text" id="phoneverify" name="phoneverify" placeholder="请输入验证码" v-model="code"/>
          <button type="button" id="sendvf" v-if="timer==0" @click="send_message">发送验证码</button>
          <button type="button" id="sendvf" v-else style="width:160px;">({{timer}})秒后重新发送</button>
      </div> -->
      <div class="index_divide"></div>
      <div class="updatepassword_box">
          <input type="tel" id="phone" placeholder="请输入您的新手机号" value="" v-model='telphoneNew'/>
      </div>
      <div class="summit_btn" @click="makeSure">确定</div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import { updateTel } from '@/api/allapis'
import topHeader from './../../components/topHeader'
export default{
  data () {
    return {
      telphoneOld: '',
      telphoneNew: '',
      code: '',
      timer: 0,
      count: 60,
      verify: '' // 接受传过来的code
    }
  },
  components: {
    topHeader
  },
  computed: {
    userInfo(){
      return this.$store.state.user.uerInfo
    }
  },

  mounted () {},

  methods: {
    goMine () {
      this.$router.go(-1)
    },
    send_message () {
      if (this.timer > 0) {
        return false
      }
      if (this.telpahone === '') {
        alert('请输入您的手机号')
        return
      }
      if (!(/^1\d{10}$/.test(this.telpahone))) {
        alert('手机号有误，请重新输入！')
        return
      }
      var tenp_count = this.count
      this.timer = tenp_count
      var self = this
      var countimer = setInterval (function () {
        if (self.timer === 0) {
          clearInterval(countimer)
          return false
        } else {
          self.timer = self.timer - 1
        }
      }, 1000)
    },
    makeSure () {
      if (this.telphoneNew === '') {
        // alert('请输入您的新手机号')
        this.$vux.alert.show({
          title: '人人同行提示',
          content: '请输入您的新手机号',
          buttonText: '好的',
          hideOnBlur: true,
          maskZIndex: 100
        })
        return
      }
      if (!(/^1\d{10}$/.test(this.telphoneNew))) {
        this.$vux.alert.show({
          title: '人人同行提示',
          content: '手机号有误，请重新输入！',
          buttonText: '好的',
          hideOnBlur: true,
          maskZIndex: 100
        })
        // alert('手机号有误，请重新输入！')
        return
      }
      updateTel({ oldPhone: this.userInfo.phone, newPhone: this.telphoneNew }).then(res => {
        // alert(res.data)
        this.$vux.alert.show({
          title: '人人同行提示',
          content: res.data,
          buttonText: '好的',
          hideOnBlur: true,
          maskZIndex: 100
        })
        this.$router.go(-1)
      })
    }
  }
}
</script>
<style  lang='less' scoped>
@import url('./updatetel.less');
</style>